<template>
  <div>
    <basic-container>
      <ele-calendar
              :render-content="renderContent"
              :data="datedef"
              :prop="prop"
              @date-change="taggle"
              @pick="datePickcalendar"
              currentmonth
              border
      ></ele-calendar>
    </basic-container>

    <el-dialog title="预约中的设备" :visible.sync="dialogTableVisible" width="70%">
      <!--<el-table :data="gridData">
        <el-table-column property="idno" label="序号" width="130"></el-table-column>
        <el-table-column property="name" label="设备别名" width="100"></el-table-column>
        <el-table-column property="name" label="设备编码" width="100"></el-table-column>
        <el-table-column property="name" label="设备名称" width="100"></el-table-column>
        <el-table-column property="name" label="型号" width="100"></el-table-column>
        <el-table-column property="name" label="品牌" width="100"></el-table-column>
        <el-table-column property="name" label="实验室" width="100"></el-table-column>
        <el-table-column property="name" label="预约部门/人" width="100"></el-table-column>
        <el-table-column property="date" label="预约时间" width="200"></el-table-column>
        <el-table-column property="name" label="操作" width="100"></el-table-column>
      </el-table>-->
      <avue-crud :option="tableOption"
                 :data="gridData"
                 :table-loading="tableLoading"
                 :page="page"
                 ref="crud" @current-change="currentPage"
                 @size-change='sizeChange'>
        <template slot-scope="scope" slot="coded">{{ scope.row.equipment.coded }}</template>
        <template slot-scope="scope" slot="equipmentName">{{ scope.row.equipment.name }}</template>
        <template slot-scope="scope" slot="marking">{{ scope.row.equipment.marking }}</template>
        <template slot-scope="scope" slot="brand">{{ scope.row.equipment.brand }}</template>
        <template slot-scope="scope" slot="equipmentTypeName">{{ comEqType(scope.row.equipment.equipmentTypeId) }}</template>
        <template slot-scope="scope" slot="startTime">
            <div>
                    {{ scope.row.startTime }}  {{ comDay(scope.row.startPeriod) }}<br/>
                    {{ scope.row.endTime }} {{ comDay(scope.row.endPeriod) }}
            </div>
        </template>
        <template slot-scope="scope" slot="laboratory">{{ scope.row.laboratory.name }}</template>
        <template slot-scope="scope" slot="ant">{{ scope.row.department.name }}-{{ scope.row.userInfo.name }}</template>
        <template slot-scope="scope" slot="menu">
          <el-button type="primary"  size="mini" plain @click="applicationClick(scope.row)">申请单</el-button>
        </template>
      </avue-crud>
    </el-dialog>

    <!--预约申请单-->
    <el-dialog title="预约单" :visible.sync="examineMode" width="60%">
        <div id="printTest">
            <el-row :gutter="10">
                <el-col :span="3">审批单号：</el-col>
                <el-col :span="9">{{ checkInfo.approvalNumber}}</el-col>
            </el-row>
            <div class="lineDiv"></div>
            <el-row :gutter="10">
                <el-col :span="3">部门：</el-col>
                <el-col :span="5">{{ checkInfo.departmentName }}</el-col>
                <el-col :span="3">申请人：</el-col>
                <el-col :span="5">{{ checkInfo.userInfoName }}</el-col>
                <el-col :span="3">申请时间：</el-col>
                <el-col :span="5">{{ checkInfo.applyForTime }}</el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="3">备注：</el-col>
                <el-col :span="21">{{ checkInfo.remarks }}</el-col>
            </el-row>
            <div class="lineDiv"></div>
            <el-row :gutter="10">
                <el-col :span="3">设备类别：</el-col>
                <el-col :span="9">{{ checkInfo.equipmentTypeName }}</el-col>
                <el-col :span="3">设备编码：</el-col>
                <el-col :span="9">{{ checkInfo.coded }}</el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="3">型       号：</el-col>
                <el-col :span="9">{{ checkInfo.marking }}</el-col>
                <el-col :span="3">设备名称：</el-col>
                <el-col :span="9">{{ checkInfo.equipmentName }}</el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="3">实 验 室：</el-col>
                <el-col :span="9">{{ checkInfo.laboratoryName }}</el-col>
                <el-col :span="3">品       牌：</el-col>
                <el-col :span="9">{{ checkInfo.brand }}</el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="3">预约时间：</el-col>
                <el-col :span="9">{{ checkInfo.startTime }} {{ comDay(checkInfo.startPeriod) }}——{{ checkInfo.endTime }} {{ comDay(checkInfo.endPeriod) }}</el-col>
            </el-row>
            <div class="lineDiv"></div>
            <el-row :gutter="10">
                <el-col :span="3">审批状态：</el-col>
                <el-col :span="5">
                    <template v-if="checkInfo.appointmentStatus == 0">待审批</template>
                    <template v-else-if="checkInfo.appointmentStatus == 1">审批中</template>
                    <template v-else-if="checkInfo.appointmentStatus == 2">通过</template>
                    <template v-else-if="checkInfo.appointmentStatus == 3">不通过</template>
                </el-col>
                <!-- <el-col :span="3">审批人：</el-col>
                <el-col :span="5">xxxx</el-col>
                <el-col :span="3">审批时间：</el-col>
                <el-col :span="5">xxxxxxxx</el-col> -->
            </el-row>
            <!-- <el-row :gutter="10">
                <el-col :span="3">备注：</el-col>
                <el-col :span="21">xxxxxxxx</el-col>
            </el-row> -->
        </div>
        <span slot="footer" class="dialog-footer">
            <!-- <el-button size="small" type="primary" v-if="examineModeType == 1" v-print="'#printTest'">打  印</el-button> -->
            <!-- <el-button size="small" type="primary" @click="_approvalNumberVerify(2)" v-if="examineModeType == 2">通  过</el-button>
            <el-button size="small" type="primary" @click="_approvalNumberVerify(3)" v-if="examineModeType == 2">不通过</el-button>
            <el-button size="small" type="primary" @click="examineModeSubmit()" v-if="examineModeType == 3">提  交</el-button> -->
            <el-button size="small" @click="examineMode = false">关 闭</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
    import eleCalendar from 'ele-calendar'
    import 'ele-calendar/dist/vue-calendar.css'
    import { getListOfSearchSelect, getEquipmentList, findById, getDevTypeList } from "@/api/equipment/appointment/calender.js"
    import { option,jsonToArray } from "@/const-personal/equipment/appointment/calender.js";
    import { validatenull } from '@/util/validate'
    export default {
        data(){
            return{
                tableOption: option, //表格设置属性
                tableData: [], //表格的数据
                tablePage: 1,
                tableLoading: false,
                tabelObj: {},
                page: {
                    total: 0, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 10, //每页显示多少条
                    pageSizes: [5, 10, 20]//
                },
                grade: {
                    box: false,
                    check: []
                },
                gridData: [{
                    id: 1,
                    idno: 2000101010,
                    date: '2016-05-02',
                    name: '测试1',
                }],
                dialogTableVisible: false,
                datedef:[
                    // {'date': "2019-12-17", 'content': '5台设备', "cid": null}
                ],
                prop: 'date', //对应日期字段名
                examineMode: false, //预约单弹窗
                checkInfo: {}, // 详情
                ids: '',
                treeData: [],
                dayList: [
                    { value: 0, label: '全天' },
                    { value: 1, label: '上午' },
                    { value: 2, label: '下午' },
                ]
            }
        },
        components: {
            eleCalendar
        },
        computed: {
            devArrData () { // 设备类型 array
                return jsonToArray(this.treeData)
            },
            // 设备类别
            comEqType () {
                return ((type) => {
                for (let i = 0; i < this.devArrData.length; i++) {
                    if (this.devArrData[i].id == type) {
                    // console.log("name:" + this.equipmentType[i].label)
                    return this.devArrData[i].name
                    }
                }
                })
            },
            // 时间段
            comDay () {
                return ((type) => {
                    for (let i = 0; i < this.dayList.length; i++) {
                        if (this.dayList[i].value == type) {
                            // console.log("name:" + this.equipmentType[i].label)
                            return this.dayList[i].label
                        }
                    }
                })
            },

        },
        created () {
            this._getDevTypeList()
            console.log('得到系统时间:' + this.formatDate())
           this._getListOfSearchSelect(this.formatDate())
        },
        methods: {
            renderContent(h, parmas) {
                const loop = data =>{
                    // console.log(data.defvalue.value.appointmentCount)
                    return data.defvalue.value ? h('div', [
                        h('span', { style: {marginRight: '0px'},}, data.defvalue.Lunar.lDayChinese),
                        h('span', data.defvalue.text),
                        h('div', [
                            h('span', {
                                props: {  style: 'lunarcalendarValue' },
                                on: {
                                    click: () => { 
                                        // console.log(parmas.defvalue.value.date) 
                                    }
                                }
                            }, data.defvalue.value.content)
                        ])
                    ]):
                    h('div', [
                        h('span', { style: {marginRight: '0px'},}, data.defvalue.Lunar.lDayChinese),
                        h('span', data.defvalue.text)
                    ]);
                }
                return (
                    <div  class='lunarcalendarClass'>
                        {loop(parmas)}
                    </div>
            )},
            // 查 设备类型 接口 pw
            _getDevTypeList() {
                getDevTypeList().then(res => {
                res = res.data
                if (res.code == 200) {
                    this.treeData = res.data;
                } else {
                    this.$notify.error({ title: '查询失败', message: res.message, type: 'danger' });
                }
                })
            },
            // 切换日期得到月份
            taggle(data) {
                console.log(this.formatDate(data))
                this._getListOfSearchSelect(this.formatDate(data))
            },
            // 查询 当月预约日期
            _getListOfSearchSelect(val) {
                getListOfSearchSelect({ date: val }).then(res => {
                    if (res.data.code == 200) {
                        res.data.data.forEach(item=>{
                            if(item.appointmentCount!=0 && item.appointmentCount!=0){
                                this.datedef.push({'date': item.date, 'content':  item.appointmentCount, "ids": item.ids})
                            }
                        })
                        //this.datedef = res.data.data;
                    } else {
                        // this.$message.error(res.message);
                        this.$notify.error({ title: '查询失败', message: res.data.message, type: 'danger' });
                    }
                })
            },
            datePickcalendar(date, event, row, dome) {
                this.ids = row.value.ids
                this._getEquipmentList();
            },
            // 通过日期查询设备列表
            _getEquipmentList() {
                if(validatenull(this.ids)){
                    return null;
                }
                let obj = {
                    page: this.page.currentPage,
                    size: this.page.pageSize,
                    ids: this.ids.toString()
                }
                getEquipmentList(obj).then(res => {
                    if (res.data.code == 200) {
                        this.dialogTableVisible = true; 
                        this.gridData = res.data.data.list;
                        this.page.total = res.data.data.total;
                        // this.page.currentPage = res.data.data.pageNum;
                        // this.page.pageSize = res.data.data.pageSize;
                    } else {
                        this.$notify.error({ title: '查询失败', message: res.data.message, type: 'danger' });
                    }
                })
            },
            // 切换页面
            currentPage (val) {
                // console.log(val);
                this.page.currentPage = val;
                this._getEquipmentList()
            },
            sizeChange (val) {
                // console.log(val);
                this.page.pageSize = val
                this._getEquipmentList()
            },
            // 申请单
            applicationClick(row) {
                findById({ id: row.id }).then(res => {
                    if (res.data.code == 200) {
                        this.checkInfo = res.data.data;
                        this.examineMode = true;
                    } else {
                        this.$notify.error({ title: '查询失败', message: res.data.message, type: 'danger' });
                    }
                })

            },
            formatDate(date, fmt = 'yyyy-MM-dd') {
                let currentDate;
                !date ? currentDate = new Date() : currentDate = new Date(date);
                var o = {
                    "M+": currentDate.getMonth() + 1, 
                    "d+": currentDate.getDate(), 
                    "h+": currentDate.getHours(), 
                    "m+": currentDate.getMinutes(),
                    "s+": currentDate.getSeconds(), 
                    "q+": Math.floor((currentDate.getMonth() + 3) / 3), 
                    "S": currentDate.getMilliseconds() 
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (currentDate.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .el-row {
        margin-left: 20px!important;
        margin-bottom: 20px;
        .el-col-3{
            font-weight:600;
        }
    }
    .lineDiv{
        border-top: 1px solid #d6d6d6;
        margin: 0px 1% 20px 25px;
        width: 90%;
    }
    .el-dialog__body{
        padding-top: 15px;
        padding-bottom: 0px;
    }
   
</style>
<style>
  .lunarcalendarClass{
    min-height:70px;
  }
  .lunarcalendarClass>div>div>span{
    border: 1px solid #409EFF;
    background-color: #409EFF;
    color: #FFFFFF;
    padding: 2px 25px;
    border-radius: 5px;
  }
</style>